<template>
  <search title="请输入预约的信息"/>

  <view v-for="k in data" :key="k">
    <view class="photo-box" @click="qrcode">
      <view class="manage-left">
        <notice
            :title="k.title"
            :time="k.time"
            :people="k.people"
            :content="k.address"
        />
      </view>

      <view class="manage-right">
        <view v-if="k.flag">
          <span class="hint">!</span>
          <text class="manage-text">当前预约</text>
        </view>
        <view v-else>
          <span class="hint-gray">!</span>
          <!--当前预约：当前有效预约，指已经得到批准但尚未执行或取消的预约-->
          <!--失效预约：当前无效但未执行的预约-->
          <!--已完成预约-->
          <text class="manage-text-gray">失效预约</text>
        </view>
      </view>
    </view>
  </view>

  <Under :selected="2"/>
</template>

<script setup lang="ts">
import Search from "@/components/head/search.vue";
import Under from "@/components/tail/under.vue";
import Notice from "@/components/card/notice.vue";
import {onMounted, reactive} from "vue";
import axios from "axios";

let data = reactive([])

onMounted(() => {
  axios.get("http://localhost:24154/api/record/data").then((resp) => {
    if (resp.status === 200 && resp.data["title"]) {
      data.push(resp.data)
    }
  })
})

function qrcode() {
  uni.switchTab({url: "/pages/qrcode/index"})
}
</script>
